<template>
  <div class="user">
    <el-form
      ref="ruleForm"
      :rules="rules"
      label-position="left"
      label-width="100px"
      :model="ruleForm"
    >
      <el-form-item label="企业logo：" prop="logoImg">
        <el-input
          v-model="ruleForm.logoImg"
          class="show-box"
          :disabled="true"
        ></el-input>
        <i v-if="ruleForm.logoImg" class="el-icon-success"></i>
        <UploaderOss
          @uploadFile="uploadFilePath"
          :file-path="ruleForm.logoImg"
          :file-info="fileInfo"
          show-title="企业logo"
          upload-id="logoImg"
        ></UploaderOss>
      </el-form-item>
      <el-form-item label="报名表：" prop="application">
        <el-input
          v-model="ruleForm.application"
          class="show-box"
          :disabled="true"
        ></el-input>
        <i v-if="ruleForm.application" class="el-icon-success"></i>
        <UploaderOss
          @uploadFile="uploadFilePath"
          :file-path="ruleForm.application"
          :file-info="fileInfo"
          show-title="报名表"
          upload-id="application"
        ></UploaderOss>
      </el-form-item>
      <el-form-item label="展示材料：" prop="ppt">
        <el-input
          v-model="ruleForm.ppt"
          class="show-box"
          :disabled="true"
        ></el-input>
        <i v-if="ruleForm.ppt" class="el-icon-success"></i>
        <UploaderOss
          @uploadFile="uploadFilePath"
          :file-path="ruleForm.ppt"
          :file-info="fileInfo"
          show-title="展示材料"
          upload-id="ppt"
        ></UploaderOss>
        <p class="user-title-tips">PPT,WORD等材料，可打包上传</p>
      </el-form-item>
      <el-form-item class="two-line" label="项目展示图片：" prop="showImg">
        <el-input
          v-model="ruleForm.showImg"
          class="show-box"
          :disabled="true"
        ></el-input>
        <i v-if="ruleForm.showImg" class="el-icon-success"></i>
        <UploaderOss
          @uploadFile="uploadFilePath"
          :file-path="ruleForm.showImg"
          :file-info="fileInfo"
          show-title="项目展示图片"
          upload-id="showImg"
        ></UploaderOss>
      </el-form-item>
      <el-form-item
        class="two-line width-80"
        label="企业或项目展示视频："
        prop="video"
      >
        <el-input
          v-model="ruleForm.video"
          class="show-box"
          :disabled="true"
        ></el-input>
        <i v-if="ruleForm.video" class="el-icon-success"></i>
        <UploaderOss
          @uploadFile="uploadFilePath"
          :file-path="ruleForm.video"
          :file-info="fileInfo"
          show-title="企业或项目展示视频"
          upload-id="video"
        ></UploaderOss>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import UploaderOss from "@/components/UploaderOss";
import { mapGetters, mapActions } from "vuex";
export default {
  components: {
    UploaderOss,
  },
  data() {
    return {
      ruleForm: {
        logoImg: "",
        application: "",
        ppt: "",
        showImg: "",
        video: "",
      },
      rules: {
        logoImg: [
          { required: true, message: "请上传企业logo", trigger: "blur" },
        ],
        application: [
          { required: true, message: "请上传报名表", trigger: "blur" },
        ],
        ppt: [{ required: true, message: "请上传展示ppt", trigger: "blur" }],
        showImg: [
          { required: true, message: "请上传项目展示图片", trigger: "blur" },
        ],
      },
      logoType: {
        type: 1, //1:企业logo; 2:报名表; 3:项目介绍; 4:项目图片; 5:展示视频; 6:其他
      },
      showNumber: false,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    ...mapActions(["projectSave", "getUserInfo", "uploadFile"]),
    init() {
      this.getUserInfo().then((res) => {
        this.ruleForm.logoImg = this.userProjectInfo.logo_url;
        this.ruleForm.application = this.userProjectInfo.enroll_form_url;
        this.ruleForm.showImg = this.userProjectInfo.pic_url;
        this.ruleForm.ppt = this.userProjectInfo.ppt_url;
        this.ruleForm.video = this.userProjectInfo.video_url;
      });
    },
    submit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let data = {
            logo_url: this.ruleForm.logoImg,
            enroll_form_url: this.ruleForm.application,
            pic_url: this.ruleForm.showImg,
            ppt_url: this.ruleForm.ppt,
            video_url: this.ruleForm.video,
          };
          this.projectSave(data).then((res) => {
            this.$message({
              message: "保存成功",
              type: "success",
            });
            this.getUserInfo();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    removeFile(removeInfo) {
      console.log(removeInfo);
    },
    uploadFilePath(uploadFile) {
      this.ruleForm[uploadFile.uploadId] = uploadFile.fileAddress;
      let data = {};
      if (uploadFile.uploadId == "logoImg") {
        data = {
          logo_url: this.ruleForm.logoImg,
        };
      } else if (uploadFile.uploadId == "application") {
        data = {
          enroll_form_url: this.ruleForm.application,
        };
      } else if (uploadFile.uploadId == "showImg") {
        data = {
          pic_url: this.ruleForm.showImg,
        };
      } else if (uploadFile.uploadId == "ppt") {
        data = {
          ppt_url: this.ruleForm.ppt,
        };
      } else if (uploadFile.uploadId == "video") {
        data = {
          video_url: this.ruleForm.video,
        };
      }
      this.projectSave(data).then((res) => {
        this.$message({
          message: "保存成功",
          type: "success",
        });
        this.getUserInfo();
      });
    },
  },
  computed: {
    ...mapGetters(["userProjectInfo", "userInfo", "userCompanyInfo"]),
    fileInfo() {
      let data = {
        match_number: this.userInfo.match_number,
        company_title: this.userCompanyInfo.title,
      };
      return data;
    },
  },
};
</script>

<style scoped>
.user {
  width: 100%;
  background: #fff;
  box-sizing: border-box;
  padding: 0 0 20px 0;
}
.user >>>.el-input{
  width: 90%;
}
.user >>> .el-input__inner {
  border: none;
  width: 100%;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #999999;
  padding: 0;
}
.user >>> .el-select {
  width: 100%;
}
.user >>> .el-form-item {
  width: 92%;
  border-bottom: 1px solid #e6e6e6;
  margin: 8px 15px 0;
  padding-bottom: 10px;
}
.two-line>>> .el-form-item__label {
  line-height: 20px;
}
</style>